<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
<h3>v-for简单示例</h3>
<p v-for="x in color">{{x}}</p>
<hr>
<p v-for="x in names">{{x.name}}</p>
<hr>
<h3>使用template模板</h3>
<template v-for="x in color">
<p>{{x}}</p>
</template>
<hr>
<h3>设置键</h3>
<p v-for="(x,k) in color">{{k}}---{{x}}</p>
<hr>
<h3>设置索引</h3> <!-- 针对json -->
<p v-for="(value, key, index) in object">{{index}}---{{key}}---{{value}}</p>
<hr>
<h3>迭代</h3>
<p v-for="x in 10">{{x}}</p>
</div>
<script type="text/javascript">
var myApp = new Vue({
	el:"#myApp",
	data:{ 
		color:['red','orange','yellow','green','cyan'],
		names:[
			{name:'张三'},
			{name:'李四'},
			{name:'王五'},
			{name:'赵六'},
		],
		object:{
			name:'张三',
			age:'18',
			ads:'北京海淀'
		}
	}
});
</script>
</body>
</html>